<template>
  <div class="picturePreview">
    <div class="pictureheader bg_style border_style ">
      <div class="search" :class="{ 'searchset':searchHflag}">
        <search-selector ref="selectorDom" @setRotate="setRotate"></search-selector>
        <YsButton type="primary" class="searchBtn" @click="getImagseList()">查询</YsButton>
      </div>
    </div>
    <div class="picturebox bg_style border_style " :class="{ 'pictureFooter':searchHflag}">
      <div class="pictureimg">
        <ul class="pictureiTop pictureiLight" :class="curTheme">
          <li>
            <label class="text_01">缺陷等级：</label>
            <span class="text_01">{{ fileImgAll.flaw_level ? fileImgAll.flaw_level : '--' }}</span>
          </li>
          <li>
            <label class="text_01">缺陷数量：</label>
            <span class="text_01">{{ fileImgAll.flaw_num ? fileImgAll.flaw_num : '--' }}</span>
          </li>
          <li>
            <label class="text_01">像质计编号：</label>
            <span class="text_01">{{ fileImgAll.quality_plan_no ? fileImgAll.quality_plan_no : '--' }}</span>
          </li>
          <li>
            <label class="text_01">最细可见丝丝号：</label>
            <span class="text_01">{{ fileImgAll.min_silk_num ? fileImgAll.min_silk_num : '--' }}</span>
          </li>
          <li>
            <label class="text_01">黑度范围：</label>
            <span
              class="text_01">{{`[${fileImgAll.min_blankness?fileImgAll.min_blankness:''}${fileImgAll.max_blankness?`,${fileImgAll.max_blankness}`:''}]
              `}}</span>
          </li>
          <li class="picturei-right">
            <div class="reprt" style="margin-right:16px" @click="getDefectModal">
              <span class="icon iconfont icon-quexianshuju"></span>
              <span class="text_01">缺陷数据</span>
            </div>

            <Select style="width:130px;margin-right:16px" class="select-border select-h36" placeholder="模板"
              v-model="template_id">
              <Option v-for="(item, index) in templateBeans" :value="item.id" :key="index" :label="item.tp_name">
              </Option>
            </Select>
            <div class="reprt" @click="getReport">
              <!-- <span class="oicon text_01 icon60 iconfont">&#xe664;</span> -->
              <span class="icon iconfont icon-chakanbaogao"></span>
              <span class="text_01">查看报告</span>
            </div>
            <div class="download" v-if="false">
              <span class="icon text_01 icon60 iconfont">&#xe70c;</span>
              <span class="text_01">下载报告</span>
            </div>
          </li>
        </ul>
        <ul class="pictureiTop pictureiImg">
          <li>
            <label class="text_01">设备号：</label>
            <span class="text_01">{{ fileImgAll.device_no ? fileImgAll.device_no : '--' }}</span>
          </li>
          <li>
            <label class="text_01">焊缝编号：</label>
            <span class="text_01">{{ fileImgAll.weld_no ? fileImgAll.weld_no : '--' }}</span>
          </li>
          <li>
            <label class="text_01">焊缝位号：</label>
            <span class="text_01">{{ fileImgAll.weld_position ? fileImgAll.weld_position : '--' }}</span>
          </li>
          <li>

            <label class="text_01">透照日期：</label>
            <span class="text_01">{{ fileImgAll.taking_pic_date ? fileImgAll.taking_pic_date : '--' }}</span>
          </li>
          <li>
            <label class="text_01">规格：</label>
            <span class="text_01">{{ fileImgAll.spec ? fileImgAll.spec : '--' }}</span>
          </li>
          <!-- <li>
            <label class="text_01">透照厚度：</label>
            <span class="text_01">{{ fileImgAll.aaa ? fileImgAll.aaaaaa : '--' }}</span>
          </li> -->
          <li>
            <label class="text_01">中心标记：</label>
            <span class="text_01">{{ fileImgAll.remark ? fileImgAll.remark : '--' }}</span>
          </li>
        </ul>
        <div class="img-list-box">
          <ul class="img-left">
            <li v-for="(item, index) in detectFileBeans" class="border_style" @click="getImgItem(index)"
              :class="{ current: index == job_index }" :key="index">
              <span class="icon iconfont icon-yiji grade" v-if="item.flaw_level == 1"></span>
              <span class="icon iconfont icon-erji grade" v-if="item.flaw_level == 2"></span>
              <span class="icon iconfont icon-sanji grade" v-if="item.flaw_level == 3"></span>
              <span class="icon iconfont icon-siji grade" v-if="item.flaw_level == 4"></span>
              <div class="img-box">
                <img class="service-img" :src="item.file_url ? imgurl(item.file_url) : ''"
                  :onerror="onErrorImg('default-02.png')">
              </div>
              <div class="img-text border_style">
                <YsIcon v-if="item.file_state==1" title="正常" class="icon-green" type="ios-checkmark-circle" />
                <YsIcon v-else-if="item.file_state==2" title="异常" @click="getReason(item)" class="icon-orange"
                  type="ios-alert" />
                <YsIcon v-else-if="item.file_state==3" class="icon-red" title="失败" type="ios-close-circle" />
                <span class="service-text text_01 ">{{ item.file_name }}</span>
              </div>
            </li>
          </ul>
          <div class="img-right border_style ">
            <!-- <div class="img-retake">复拍</div> -->
            <!-- <div class="img-switch">
              <span class="icon iconfont text_01 icon-zuo" @click="arrowClick('left')"></span>
              <span class="text_01">{{ Number(job_index) + 1 }}/{{ detectFileBeans.length }}</span>
              <span class="icon iconfont text_01 icon-you" @click="arrowClick('right')"></span>
            </div> -->
            <div class="img-outer">
              <div id="imgOuter">
                <img class="ir-one" id="imgBox" v-if="app_logo" :src="app_logo" :onerror="onErrorImg('default-03.png')">
                <img v-else class="ir-tow" :src="`${require('../../assets/images/default2.png')}`">
                <div v-if="app_logo">
                  <div v-for="(it, index) in fileFlawInfos" :key="index" class="rectangleList"
                    :style="{ left: `${it.label_left_x}px`, top: `${it.label_left_y}px` }">
                    <p class="titleFlaw">{{ it.flaw_type_name }}</p>
                    <div class="shape" :style="{ width: `${it.width}px`, height: `${it.height}px` }"> </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="img-footer bg_style border_style">
              <div class="text_01" style="font-size: 16px;">
                {{ detectFileBeans[job_index] && detectFileBeans[job_index].file_name }}</div>
              <div class="text_01" style="font-size: 16px;">
                <span v-html="setIcon(detectFileBeans[job_index] && detectFileBeans[job_index].label_no)"></span>
                <span @click="editChara" class="icon iconfont icon-bianji"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <pro-dialog class="modal-box" ref="charaDom" width="430" :nopadding="true" title="编辑底片标识号">
      <div class="modal-tex">
        <YsInput v-model.trim="labelNoValue" class="inputW" maxlength="60" />
      </div>
      <div style="padding:0 24px 24px">
        <YsRow class="foot-btn">
          <YsButton @click="cancelCharaClick">取消</YsButton>
          <YsButton @click="okCharaClick" type="primary">提交</YsButton>
        </YsRow>
      </div>
    </pro-dialog>
    <pro-dialog class="modal-box" ref="defectDom" width="1072" :nopadding="true" title="缺陷数据">
      <div class="modal-inner">
        <YsRow>
          <YsTable class="ba-table" :columns="tableColumn" :border="true" width="100%" :data="tableData"> </YsTable>
        </YsRow>
        <YsRow class="foot-btn" style="margin-top:16px">
          <YsButton class="btn-style" @click="handleClose">取消</YsButton>
          <YsButton class="btn-style" @click="export2Excel" type="primary">下载</YsButton>
        </YsRow>
      </div>
    </pro-dialog>

    <pro-dialog class="modal-box" ref="anomalyDom" width="477" :nopadding="true" title="检测异常原因">
      <div class="modal-inner" style="padding-left:10px">
        <div class="anomaly-row">
          <div class="anomaly-left">
            <YsIcon class="icon-orange anomaly-icon" type="ios-alert" />
            <div class="line" v-if="fileMessageInfos.length!=1"></div>
          </div>
          <div class="anomaly-right">
            <div class="anomaly-item" v-for="item in fileMessageInfos" :key="item.id">
              <span>{{item.msg_content}}</span>
            </div>
          </div>
        </div>

      </div>
    </pro-dialog>
  </div>
</template>
<script>
import { ys_utils } from 'ys-utils-js';
import { mapGetters, mapActions } from "vuex";
import { mapState } from "vuex";
import SearchSelector from "_c/common/SearchSelector/index.vue";
export default {
  name: 'picturePreview',
  components: {
    SearchSelector
  },
  data() {
    return {
      page: {

      },
      fileMessageInfos: [],
      template_id: "",
      templateBeans: [],
      searchHflag: false,
      rotate: false,
      labelNoValue: '',
      app_logo: '',
      cur_qualified: 0,
      template_list: [
        { id: 0, name: '模板1' },
        { id: 1, name: '模板2' },
        { id: 2, name: '模板3' },
      ],
      detect_list: [
        { is_qualified: 0, name: '全部状态' },
        { is_qualified: 1, name: 'Ⅰ级' },
        { is_qualified: 2, name: 'Ⅱ级' },
        { is_qualified: 3, name: 'Ⅲ级' },
        { is_qualified: 4, name: 'Ⅳ级' },
      ],
      adlcvnoFlag: false,
      job_details: {
        id: null, // 任务ID
        is_qualified: null,  //合格参数：0-不合格，1-合格
        start_recd: 1,//开始数据
        limit_recd: 100,//查询的条数
      },
      job_index: null,
      job_list: {
        job_id: null,
        start_recd: 1,
        limit_recd: 100,
      },
      fileFlawInfos: [],
      detectFileBeans: [],
      jobBean: {},
      fileImgAll: {},
      leftIcon: "",
      RightIcon: "",
      tableColumn: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: 70
        },
        {
          title: '编号',
          key: "data_code",

        },
        {
          title: '缺陷类型',
          key: "flaw_type_name",
        },
        {
          title: '坐标',
          key: "position",
          minWidth: 100,
          render: (h, params) => {
            let positionObj = JSON.parse(params.row.position);
            return h("span", {}, `(${positionObj.x1},${positionObj.x1}),(${positionObj.x2},${positionObj.y2})`)
          }
        },
        {
          title: '尺寸',
          key: "flaw_size",
          render: (h, params) => {
            let flawSize = JSON.parse(params.row.flaw_size);
            if (params.row.flaw_type_code == 'yx') { //圆形
              return h("span", {}, `长径${flawSize.flaw_val || '--'}`)
            } else if (params.row.flaw_type_code == 'tx') { //条形
              return h("span", {}, `长度${flawSize.flaw_val || '--'}`)
            } else if (params.row.flaw_type_code == 'wht') { //未焊透
              return h("span", {}, `长度${flawSize.flaw_val || '--'},深度${flawSize.flaw_depth || '--'}`)
            }
          }
        },
        {
          title: '综合',
          key: "other_data",
          minWidth: 160,
          render: (h, params) => {
            let otherData = JSON.parse(params.row.other_data);
            if (params.row.flaw_type_code == 'yx') { //圆形
              return h("span", {}, `缺陷点数:${otherData.sumFlawNum >= 0 ? otherData.sumFlawNum : '--'}`)
            } else if (params.row.flaw_type_code == 'tx') { //条形
              return h("span", {}, `最大长度:${otherData.maxLength >= 0 ? otherData.maxLength : '--'},累计最大长度:${otherData.sumMaxLength >= 0 ? otherData.sumMaxLength : '--'}`)
            } else if (params.row.flaw_type_code == 'wht') { //未焊透
              return h("span", {}, `最大长度:${otherData.maxLength >= 0 ? otherData.maxLength : '--'},最大深度:${otherData.maxDepth >= 0 ? otherData.maxDepth : '--'},累计长度:${otherData.sumLength >= 0 ? otherData.sumLength : '--'}`)
            }
          }
        },
      ],
      tableData: []
    }
  },
  computed: {
    ...mapState(['curTheme']),
  },
  mounted() {
    if (this.$route.query.dataDetailsId && this.$route.query.dataListId) {
      this.job_details.id = Number(this.$route.query.dataDetailsId)
      this.job_list.job_id = Number(this.$route.query.dataListId)
      this.getImagseList()
    } else {
      this.$YsMessage.error('未获取到id');
    }
    setTimeout(() => {
      if (document.getElementById("imgBox")) {
        if (document.getElementById("imgBox").clientHeight < 20) return
        document.getElementById("imgOuter").style.width = `${document.getElementById("imgBox").clientWidth + 2}px`
        document.getElementById("imgOuter").style.height = `${document.getElementById("imgBox").clientHeight + 2}px`
      }
      document.getElementById("imgOuter").style.opacity = 1
    }, 500);
  },
  methods: {
    ...mapActions(['getDetectJobList', 'getDetectImgDetail', 'editReport', 'getFileLastUseTempListAPI', 'getFlawProcessAPI', 'getFileMessageAPI']),
    // 识别号取消弹出
    cancelCharaClick() {
      this.$refs.charaDom.close()
    },
    //识别号确认弹出
    okCharaClick() {
      if (this.labelNoValue.length == 0) return this.$YsMessage.error('不能为空！');
      this.editReport({ file_info: { id: this.detectFileBeans[this.job_index].id, label_no: `${this.leftIcon}${this.labelNoValue}${this.RightIcon}` } }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.detectFileBeans[this.job_index].label_no = this.labelNoValue
          this.$YsMessage.success(data.message_text)
          this.$refs.charaDom.close()
        } else {
          this.$YsMessage.error(msg);
        }
      })
    },
    //传递参数
    setIcon(val) {
      if (val) {
        let characteristic = val.replace(/jt|cl/g, function ($0, $1) {
          if ($0 == 'jt') {
            return " <span  class='icon iconfont icon-xiangshangjiantou'></span> "
          } else if ($0 == 'cl') {
            return " <span  class='icon iconfont  icon-shizijiantou'></span> "
          }
        })
        return characteristic
      }
    },
    //编辑识别号
    editChara() {
      let label_data = this.detectFileBeans[this.job_index].label_no
      if (label_data) {
        this.labelNoValue = label_data
      }
      this.$refs.charaDom.show()
    },
    //获取模板
    getTempList() {
      this.getFileLastUseTempListAPI({ file_id: this.fileImgAll.id }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          let val = data.templateBeans.find(item => item.is_use)
          if (val) {
            this.template_id = val.id
          }
          this.templateBeans = data.templateBeans
        } else {
          this.templateBeans = this.$options.data().templateBeans
        }
      })
    },
    //获取tree列表
    getImagseList() {
      let _this = this
      this.detectFileBeans = []
      let parmes = { job_id: this.job_list.job_id, ...this.$refs.selectorDom.searchBean }
      parmes.file_level = parmes.file_level || null
      this.getDetectJobList({ ...this.job_list, searchBean: parmes }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.jobBean = data.jobBean
          if (data.detectFileBeans && data.detectFileBeans.length > 0) {
            let jobIdx = data.detectFileBeans.findIndex(function (item) { return item.id == _this.$route.query.dataDetailsId })
            if (jobIdx != -1) {
              this.job_index = jobIdx
              this.detectFileBeans = data.detectFileBeans
              this.fileImgAll = this.detectFileBeans[this.job_index]
              this.getImgDetail(data.detectFileBeans[this.job_index].id)
              this.app_logo = this.imgurl(data.detectFileBeans[this.job_index].file_url)
            } else { this.detectFileBeans = data.detectFileBeans }
            this.getTempList()
          } else {
            this.jobBean = this.$options.data().jobBean
            this.app_logo = this.$options.data().app_logo
            this.detectFileBeans = this.$options.data().detectFileBeans
            this.fileImgAll = this.$options.data().fileImgAll
          }
        }
      })
    },
    //获取图片详细信息
    getImgDetail(id) {
      this.getDetectImgDetail({ file_id: id }).then(async res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.fileFlawInfos = await this.setParticle(data.fileFlawInfos)
        } else {
          this.fileFlawInfos = this.$options.data.fileFlawInfos
        }
      })
    },
    //展开是否下载
    changeDetails(item) {
      item.qualified = !item.qualified
    },
    //查看详情
    getReport() {
      if (!this.template_id) return this.$YsMessage.info("请选择模板")
      this.$router.push({ name: 'reportPreview', query: { template_id: this.template_id, file_id: this.fileImgAll.id } });
    },
    //获取照片
    imgurl(path) {
      return `${window.GlobalConfig.serviceProxy.BaseUrl}` + path
    },
    //设置内容
    setParticle(data) {
      let newdata = data.map(v => {
        return { ...v, width: v.label_right_x - v.label_left_x, height: v.label_right_y - v.label_left_y }
      })
      return newdata
    },
    //设置图片切换
    async getImgItem(index) {
      this.job_index = index
      this.fileImgAll = this.detectFileBeans[index]
      this.app_logo = this.imgurl(this.fileImgAll.file_url)
      await this.getImgDetail(this.fileImgAll.id)
      if (document.getElementById("imgBox")) {

        document.getElementById("imgOuter").style.width = `${document.getElementById("imgBox").clientWidth + 2}px`
        document.getElementById("imgOuter").style.height = `${document.getElementById("imgBox").clientHeight + 2}px`
        setTimeout(() => {
          document.getElementById("imgOuter").style.opacity = 1
        }, 300);
      }
    },
    //图片报错
    onErrorImg(name) {
      return ("this.οnerrοr=null;this.src=" + '"' + require(`../../assets/images/${name}`) + '";');
    },
    //设置选中
    setRotate(item) {
      this.searchHflag = item
    },
    //打开缺陷数据弹出
    getDefectModal() {
      if (!this.fileImgAll.id) return this.$YsMessage.info("请选择数据")
      this.$refs.defectDom.show()
      this.getDefectData()
    },
    // 关闭缺陷数据
    handleClose() {
      this.$refs.defectDom.close()
    },
    //下载缺陷数据
    export2Excel(item) {
      import('../../utils/excel/Excel2Export').then((excel) => {
        const tHeader = ["编号", "缺陷类型", "坐标", "尺寸", "综合"];
        const filterVal = ['data_code', 'flaw_type_name', 'position', 'flaw_size', 'other_data']
        let datas = []
        for (let [index, item] of new Map(this.tableData.map((item, index) => [index, item]))) {
          let obj = {}
          let position_obj = JSON.parse(item.position)
          obj['data_code'] = item.data_code ? item.data_code : '--'
          obj['flaw_type_name'] = item.flaw_type_name ? item.flaw_type_name : '--'
          obj['position'] = item.position ? `(${position_obj.x1},${position_obj.x1}),(${position_obj.x2},${position_obj.y2})` : '--'

          let flawSize = JSON.parse(item.flaw_size);
          if (item.flaw_type == 13) { //圆形
            obj['flaw_size'] = `长径${flawSize.flaw_val || '--'}`
          } else if (item.flaw_type == 14) { //条形
            obj['flaw_size'] = `长度${flawSize.flaw_val || '--'}`
          } else if (item.flaw_type == 16) { //未焊透
            obj['flaw_size'] = `长度${flawSize.flaw_val || '--'},深度${flawSize.flaw_depth || '--'}`
          }

          let otherData = JSON.parse(item.other_data);
          if (item.flaw_type == 13) { //圆形
            obj['other_data'] = `缺陷点数:${otherData.sumFlawNum >= 0 ? otherData.sumFlawNum : '--'}`
          } else if (item.flaw_type == 14) { //条形
            obj['other_data'] = `最大长度:${otherData.maxLength >= 0 ? otherData.maxLength : '--'},累计最大长度:${otherData.sumMaxLength >= 0 ? otherData.sumMaxLength : '--'}`
          } else if (item.flaw_type == 16) { //未焊透
            obj['other_data'] = `最大长度:${otherData.maxLength >= 0 ? otherData.maxLength : '--'},最大深度:${otherData.maxDepth >= 0 ? otherData.maxDepth : '--'},累计长度:${otherData.sumLength >= 0 ? otherData.sumLength : '--'}`
          }
          datas[index] = obj
        }

        let data = datas.map((v) => filterVal.map((j) => v[j])); // item.tableData为请求的数据，此处理是为了对应字段
        let excelname = '缺陷数据'
        excel.export_json_to_excel({
          header: tHeader, // 这里是第三行的表头
          data,
          filename: excelname,
          autoWidth: false
        })
      })
    },
    //查看缺陷数据
    getDefectData() {
      this.tableData = []
      this.getFlawProcessAPI({ file_id: this.fileImgAll.id }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.tableData = data.infos
        }
      })
    },
    // 点击箭头选择图片
    arrowClick(text) {
      if (text == 'left') {
        let num = --this.job_index
        if (num < 0) return this.job_index = 0
        this.getImgItem(num)
      } else {
        let num2 = ++this.job_index
        if (num2 >= this.detectFileBeans.length) return this.job_index = this.detectFileBeans.length - 1
        this.getImgItem(num2)
      }
    },
    //查看失败原因
    getReason(item) {
      this.fileMessageInfos = []
      this.getFileMessageAPI({ file_id: item.id }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.fileMessageInfos = data.fileMessageInfos
          if (this.fileMessageInfos.length > 0) {
            this.$refs.anomalyDom.show()
          } else {
            this.$YsMessage.info('暂无异常');
          }
        } else {
          this.$YsMessage.error(msg);
        }
      })

    }
  },
}
</script>

<style scoped lang='less'>
.anomaly-row {
  display: flex;

  .anomaly-left {
    width: 20px;
    // overflow: hidden;
    position: relative;

    .anomaly-icon {
      position: relative;
      left: 10px;
      z-index: 999;
      font-size: 22px;
    }

    .line {
      width: 1px;
      background: #ccc;
      position: absolute;
      top: 30px;
      bottom: 20px;
      right: 0;
    }
  }

  .anomaly-right {
    padding: 0 0 0 19px;

    .anomaly-item {
      margin-bottom: 16px;
      font-size: 16px;
      position: relative;

      span {
        overflow-wrap: break-word;
        /*就是下面这一句，好像网上没有这一个的说明，但是浏览器都支持*/
        word-break: break-word;
        word-wrap: break-word;
      }

      &::before {
        content: "";
        position: absolute;
        width: 11px;
        height: 1px;
        top: 10px;
        left: -20px;
        background: #ccc;
      }
    }
  }
}

/deep/ .contentCardBox {
  height: auto !important;
}

.modalSelect {
  /deep/ .ivu-select-input {
    height: 38px !important;
    line-height: 38px !important;
  }
}

.picturePreview {
  height: 100%;

  .picturebox {
    border: 1px solid rgba(207, 215, 229, 0.6);
    border-radius: 4px;
    height: calc(100% - 100px);

    // overflow: auto;
    .pictureTree {
      padding: 20px;
      width: 270px;
    }

    .pictureimg {
      width: 100%;
      height: 100%;
      // padding: 0 16px;

      .pictureiLight {
        background: #f5f7fa;
        height: 63px;
        border-radius: 4px 4px 0 0;
      }

      .theme-blue.pictureiLight {
        background: #242e42;
      }

      .pictureiImg {
        height: 59px;
        line-height: 59px;
      }

      .pictureiTop {
        width: 100%;

        align-items: center;
        display: flex;
        padding: 0 24px;

        &>li {
          display: flex;
          margin-right: 30px;
          font-size: 16px;

          label {
            opacity: 0.6;
          }
        }

        .picturei-right {
          margin-left: auto;
          margin-right: 0;
          display: flex;
          color: rgba(64, 86, 128, 1);

          .icon {
            margin-right: 6px;
            font-size: 14px;
            color: rgba(64, 86, 128, 1);
          }

          .reprt {
            cursor: pointer;
            line-height: 40px;

            .icon {
              font-size: 18px;
            }

            &:hover {
              span {
                color: #0091ff !important;
              }

              .icon {
                color: #0091ff;
              }
            }
          }

          .download {
            margin-left: 40px;
            cursor: pointer;

            &:hover {
              span {
                color: #0091ff;
              }

              .icon {
                color: #0091ff;
              }
            }
          }
        }
      }

      .img-list-box {
        height: calc(100% - 146px);
        display: flex;
        position: relative;
        padding: 0 24px;
        width: 100%;

        .img-footer {
          position: absolute;
          z-index: 10;
          width: 100%;
          height: 50px;
          line-height: 50px;
          padding: 0 24px;
          display: flex;
          bottom: 0;
          border-radius: 0 0 4px 4px;
          border-top: 1px solid transparent;
          justify-content: space-between;
        }

        .img-right {
          height: 100%;
          border-radius: 4px;
          margin-left: 10px;
          width: calc(100% - 408px);
          flex: 1;
          position: relative;

          .img-retake {
            width: 48px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            font-size: 14px;
            background: #0091ff;
            border-radius: 2px 2px 2px 2px;
            color: #fff;
            position: absolute;
            right: 16px;
            top: 16px;
            z-index: 999;
          }

          .img-switch {
            width: 180px;
            height: 40px;
            background: #ffffff;
            border-radius: 3px 3px 3px 3px;
            opacity: 1;
            position: absolute;
            margin-left: -90px;
            left: 50%;
            bottom: 70px;
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .icon:hover {
              cursor: pointer;
              color: #0091ff;
            }
          }

          .img-outer {
            width: 100%;
            height: calc(100% - 50px);
            overflow: auto;
          }

          border: 1px solid transparent;

          .ir-one {
            display: block;
          }

          #imgOuter {
            border: 1px solid transparent;
            margin: 40px auto;
            position: relative;
            opacity: 0;
            text-align: center;

            .dlcvno {
              position: absolute;
              top: 20px;
              right: 20px;
              font-size: 32px;

              span {
                font-size: 22px;
                margin-top: -4px;
              }

              // font-weight: bold   ;
            }

            .rectangleList {
              position: absolute;

              .titleFlaw {
                margin-top: -21px;
                color: #d53939;
              }
            }

            .shape {
              width: 10px;
              height: 10px;
              border: 1px solid #d53939;
              // background: #d5393941;
            }
          }

          .ir-tow {
            width: 250px;
            height: 260px;
            margin: 0 auto;
          }
        }

        .img-left {
          height: 100%;
          overflow: auto;
          width: 400px;

          .service-sign {
            width: 22px;
            height: 22px;
            background: #13b38f;
            border-radius: 50%;
          }

          .service-text {
            margin-left: 8px;
          }

          .rectangle {
            position: absolute;
            left: 8px;
            top: 8px;
            z-index: 20;
            width: 28px;
            text-align: center;
            height: 24px;
            line-height: 24px;
            background: #0091ff;
            border-radius: 2px 2px 2px 2px;
            color: #fff;
            font-size: 14px;
          }

          li {
            border: 1px solid rgba(225, 230, 240, 1);
            margin-bottom: 8px;
            border-radius: 4px;
            position: relative;

            &:last-child {
              margin-bottom: 0;
            }

            .labelno {
              position: absolute;
              right: 10px;
              top: 4px;
            }

            .icon-yiji {
              color: #13b38f;
            }

            .icon-erji {
              color: #0091ff;
            }

            .icon-sanji {
              color: #e77930;
            }

            .icon-siji {
              color: #d53939;
            }

            .grade {
              position: absolute;
              right: 12px;
              bottom: 49px;
              font-size: 70px;
              z-index: 99;
            }

            .img-text {
              padding: 0 16px;
              height: 48px;
              border-top: 1px solid #ccc;
              line-height: 48px;
              display: flex;
              // justify-content: space-between;
              align-items: center;

              .icon-green {
                color: #13b38f;
              }

              .icon-red {
                color: #d53939;
              }

              .ivu-icon {
                font-size: 22px;
              }

              .z .setting {
                text-align: right;
              }
            }
          }
        }
      }
    }
  }

  .icon-orange {
    color: #e77930;
  }

  .pictureFooter {
    height: calc(100% - 148px);
  }

  .pictureheader {
    width: 100%;
    border: 1px solid #cfd7e5;
    display: flex;
    border-radius: 4px;
    margin-bottom: 8px;
  }
}

.searchset {
  height: auto !important;
}

.search {
  height: 72px;
  overflow: hidden;
  display: flex;
  // align-items: center;
  padding: 16px;

  .card-url {
    background: #f1f3f5;
  }

  .goback {
    margin-left: auto;
  }
}

.img-box {
  width: 100%;
  height: 197px;
  overflow: hidden;

  .service-img {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 1.5s;
    display: block;
  }
}

.pictureimg .img-list-box .img-left li.current {
  border-color: #0061ff !important;
  // background: rgba(0, 97, 229, 0.2) !important;
}

.icon-bianji {
  margin: 2px 0 0 6px;
  cursor: pointer;
}

.modal-tex {
  padding: 4px 24px 24px;
  display: flex;

  .inputW {
    width: 100%;
  }

  .modal-icon {
    width: 40px;
    height: 40px;
    margin-right: 4px;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #cfd7e5;
    border-radius: 4px;
  }

  .modal-mr {
    margin-right: 0;
    margin-left: 4px;
  }
}

.modal-box {
  /deep/.ivu-modal-header {
    // background: transparent !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /deep/ .ivu-modal-close {
    right: 18px;
  }
}

.searchBtn {
  width: 80px;
  min-width: 80px;
  height: 40px;
  font-family: PingFang SC;
  margin-left: auto;
}

.search-input {
  height: 40px;
  // width: 208px;
  margin-right: 10px;
  border-radius: 4px;
}

.modal-inner {
  padding: 0 24px 24px 24px;

  .ba-table {
    /deep/.ivu-table {
      .ivu-table-body {
        height: 44vh;
        overflow-y: auto;
      }

      body::-webkit-scrollbar,
      div::-webkit-scrollbar,
      ul::-webkit-scrollbar {
        height: 0;
      }
    }
  }

  /deep/.ivu-table-wrapper {
    box-shadow: none;
  }
}

.btn-style {
  width: 96px;
  height: 48px;
}
</style>